<template>
  <div>
      <!-- v-for 更新监测 -->
    <ul>
        <li v-for="(item,index) in arr" :key="index" v-html="item"></li>
    </ul>
    <button @click="reverse">翻转</button>
    <button @click="slice">截取</button>
    <button @click="change">修改元素</button>
  </div>
</template>

<script>
export default {
data(){
    return{
        arr:[45,68,75,23,96,88]
    }
},
methods:{
    // 数组变更方法 v-for会监测更新
    // push/unshift/pop/shift/reverse/splice/sort
    reverse(){
        this.arr.reverse()
    },
    //非数组变更方法 v-for 不会监测更新 filter/concat/slice
    //把返回的新数组赋值给旧数组 强制更新
    slice(){
        this.arr=this.arr.slice(0,3)
    },
    //使用this.$set()方法更新某个值
    change(){
        // this.arr[0]=999
        this.$set(this.arr,0,999)
    }
}
}
</script>

<style>

</style>
